<template>
  <div>
    <el-container>
      <el-header>
        <div class="flet">
          <el-select v-model="order" placeholder="请选择" size="mini">
            <el-option value="asc" label="升序">升序</el-option>
            <el-option value="desc" label="降序">降序</el-option>
          </el-select>
          <el-input v-model="keyword" placeholder="请输入内容" size="mini" style="width:200px"></el-input>
          <el-button type="primary" size="mini" @click="lbtu">搜索</el-button>
        </div>
        <div class="refie">
          <el-button type="primary" size="mini" @click="dialogFormVisible=true">创建相册</el-button>
          <el-button type="primary" size="mini" @click="shang=true">上传图片</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <ul>
            <li v-for="(item,index) in lbli" :key="index" :class="{act:item.id==cid}" @click.self="lbdian(item.id)">
              <div>{{item.name}}</div>
              <div>
                <el-dropdown type="primary" @command="handleCommand" >
                  <span class="el-dropdown-link">
                    {{item.images_count}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu >
                    <el-dropdown-item :command="{type:'a',xiu:item}">修改</el-dropdown-item>
                    <el-dropdown-item :command="{type:'b',id:item.id}">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <el-row :gutter="20" >
            <el-col :span="6" v-for="(item,index) in liw" :key="index">
              <el-card :body-style="{ padding: '0px' }" >
                <el-image
                  :src="item.url"
                  style="width:100%;height:150px"
                  :preview-src-list="[item.url]"
                />
                <div style="padding: 14px;" >
                  <span>{{item.name}}</span>
                  <div class="bottom clearfix" >
                      <el-button type="text"  class="button" @click="tupan(item)">修改</el-button>
                      <el-button type="text"  class="button" @click="deltu(item.id)">删除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    <!-- 分页器 -->
      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[6, 12, 18]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-footer>
    </el-container>
    <!-- 添加 -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form >
        <el-form-item label="名称" >
          <el-input v-model="lb_name" ></el-input>
        </el-form-item>
      </el-form>
      <el-form >
        <el-form-item label="数量" >
           <el-input-number v-model="lb_order" label="相册排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="lbadd" >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible1">
      <el-form :model="zuoxiu">
        <el-form-item label="名称" >
          <el-input v-model="zuoxiu.name" ></el-input>
        </el-form-item>
      </el-form>
      <el-form >
        <el-form-item label="数量" >
           <el-input-number v-model="zuoxiu.order" label="相册排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="lbadd1" >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片修改 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible2">
      <el-form >
        <el-form-item label="名称" >
          <el-input v-model="tulist.name" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="lbadd2" >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上传图片 -->
    <el-dialog
      title="上传图片"
      :visible.sync="shang"
      width="40%"
      @close="lbtu"
     >
      <el-upload
        class="upload-demo"
        drag
        action="/admin/image/upload"
        multiple
        name='img'
        :headers="{token:this.$store.state.token}"
        :on-success="shangchuang"
        :data="{image_class_id:this.cid}">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  data() {
    return {
      lbli: [],
      cid: "", //图片的id
      liw: [],
      limit: 6,
      page: 1,
      order: "",
      keyword: "",
      total:0,
      // 添加
      dialogFormVisible:false,
      lb_name:'',
      lb_order:0,
     
      // 左边修改
      dialogFormVisible1:false,
      zuoxiu:{
        id:'',
        name:'',
        order:0
      },
      // 图片修改
      dialogFormVisible2:false,
      tulist:{
        id:'',
        name:'',
      },
      // 上传图片
      shang:false,
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.lblist();
  },
  methods: {
    // 获取左边数据
    lblist() {
      this.$axios
        .get("/admin/imageclass/1")
        .then(res => {
          console.log(res);
          this.lbli = res.data.list;
          this.cid = res.data.list[0].id;
          this.lbtu();
        })
        .catch(error => {
          console.log(error.response.data);
          return false;
        });
    },
    // 获取右侧图片数据
    lbtu() {
      this.$axios
        .get(
          `/admin/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`
        )
        .then(res => {
          console.log(res);
          this.liw = res.data.list;
          this.total = res.data.totalCount;
        })
        .catch(error => {
          console.log(error.response.data);
          return false
        });
    },
    // 点击左侧菜单栏切换操作
    lbdian(id){
      this.cid=id;
      this.page=1;
      this.lbtu();

    },
    // 添加
    lbadd(){
      if(this.lb_name==""||this.lb_order==""){
        this.$message.error("名称或排序不能为空")
        return false
      }
      this.$axios.post('/admin/imageclass',{
        name:this.lb_name,
        order:this.lb_order
      }).then(res=>{
        console.log(res)
        this.$message.success('添加相册成功')
        this.lblist()
        this.dialogFormVisible=false
      }).catch(error=>{
        // console.log(error.response.data)
        this.$message.error(error.response.data.msg)
        return false
      })
    },
    // 下拉菜单
     handleCommand(command) {
      
        if(command.type=="a"){
          this.dialogFormVisible1=true;
          this.zuoxiu = command.xiu
          console.log(this.zuoxiu)
        }
        if(command.type=="b"){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$axios.delete(`/admin/imageclass/${command.id}`).then(res=>{
            console.log(res)
            this.$message.success('删除成功')
            this.lblist()
          }).catch(error=>{
            // console.log(error.response.data)
            this.$message.error(error.response.data)
            return false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }
      },
      // 左边修改
      lbadd1(){
        this.$axios.post('/admin/imageclass/'+this.zuoxiu.id,this.zuoxiu).then(res=>{
          console.log(res)
          this.lblist()
        })
        this.dialogFormVisible1=false;
      },
      // 删除图片
      deltu(id){
        console.log(id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(`/admin/image/${id}`).then(res=>{
          // console.log(res)
              this.$message.success('删除成功');
              this.lbtu();
            }).catch(error=>{
              this.$message.error(res.response.data)
              return false
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      // 修改图片名称
      tupan(item){
        console.log(item)
        this.tulist=item;
        this.dialogFormVisible2=true
      },
       lbadd2(){
         this.$axios.post(`/admin/image/${this.tulist.id}`,this.tulist).then(res=>{
           console.log(res)
           this.$message.success('修改成功');
         }).catch(error=>{
           this.$message.error(error.response.data)
           return false
         })
        this.dialogFormVisible2=false;
      },
      // 上传图片
      shangchuang(res){
        console.log(res)
      },
      // 分页器
    handleSizeChange(pagesize) {
      this.page=1;
      this.limit = pagesize;
      this.lbtu();
    },
    handleCurrentChange(pagenum) {
      this.page = pagenum;
      this.lbtu();
    }
  }
};
</script>

<style scoped>
.el-header {
  width: 100%;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
ul {
  list-style: none;
  padding: 0px;
}
ul > li {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
}
</style>
